<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>login</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/other.css">

    <script src="../js/move.js"></script>
    <script src="../js/main.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/js.cookie.js"></script>
</head>
<body style="height: 966px;">
<div id="doc" style="background: #fff;">
<div class="login-page">
    <div id="loginHeader">
        <div class="logo">
            <a href="http://i.360.cn/login?src=pcw_qikoo&amp;destUrl=http%3A%2F%2Fmall.360.com%2Fuser" title=""><span></span></a>
        </div>
    </div>
    <!---->
    <div class="login-content">
        <div class="login-bg">
        </div>
        <div class="center_content">
            <div class="login-logo-text">
                <a class="content-bg-link" href="http://i.360.cn/security/accountguard?sb_param=2cd54eaf9055c9a88708ee0f69ae9b00" title="" target="_blank"></a>
            </div>
            <div class="content-layout" style="display: block;">
                <div class="uc-logincode">
                    <a href="#" class="btn-code" title="扫码安全登录"></a>
                </div>
                <div id="loginWrap">
                    <h1 class="login-title">
                        帐号登录
                    </h1>
                    <div class="mod-qiuser-pop quc-qiuser-panel">
                        <div class="login-wrapper quc-wrapper quc-page">
                            <div class="quc-mod-sign-in quc-mod-normal-sign-in">
                                <div class="quc-tip-wrapper">
                                    <p class="quc-tip" id="error-tip" style="color: red;"></p>
                                </div>
                                <div class="quc-main"><form class="quc-form"><p class="quc-field quc-field-account quc-input-long"><span class="quc-fixIe6margin"><label class="quc-label"></label></span><span class="quc-input-bg"><input class="quc-input quc-input-account" type="text" name="account" id="log-usn" placeholder="手机号/用户名/邮箱" onblur="checkPhoneNum()" autocomplete="off"></span></p><p class="quc-field quc-field-password quc-input-long"><span class="quc-fixIe6margin"><label class="quc-label"></label></span><span class="quc-input-bg"><input class="quc-input quc-input-password" type="password" name="password" maxlength="20" placeholder="密码/动态密码" onblur="checkPwd()" id="log-pwd"></span></p><p class="quc-field quc-field-captcha quc-input-short"><span class="quc-input-bg"><input class="quc-input quc-input-captcha" type="text" name="phrase" maxlength="7" autocomplete="off" placeholder="请输入验证码"></span><img class="quc-captcha-img quc-captcha-change" alt="验证码" title="点击更换" tabindex="99"> <a class="quc-link quc-captcha-change-link quc-captcha-change" href="#"></a></p><p class="quc-field quc-field-keep-alive quc-clearfix"><a class="forgetPass quc-link" href="http://i.360.cn/findpwd/" target="_blank">找回密码？</a><a class="signUpAccount quc-link" href="register.html" target="_blank" id="toRegister">注册帐号</a></p><p class="quc-field quc-field-submit"><input type="button" value="登录" id="log-login" class="quc-submit quc-button quc-button-sign-in"> </p><p class="quc-field quc-field-third-part"><span>其他帐号登录：</span><span class="quc-third-part"><a href="#" class="quc-third-part-icon quc-third-part-icon-sina" title="新浪微博登录"></a><a href="#" class="quc-third-part-icon quc-third-part-icon-renren" title="人人登录"></a><a href="#" class="quc-third-part-icon quc-third-part-icon-fetion" title="飞信登录"></a><a href="#" class="quc-third-part-icon quc-third-part-icon-telecom" title="天翼登录"></a><a href="#" class="quc-third-part-icon quc-third-part-icon-tencent" title="QQ登录"></a><a href="#" class="quc-third-part-icon quc-third-part-icon-weixin" title="微信登录"></a></span></p></form></div><div class="quc-footer" style="display: none;"><a class="quc-link quc-link-grey quc-link-normal-sign-in" href="#">使用其他帐号登录</a><a class="quc-link quc-link-grey quc-link-quick-sign-in" href="#" style="display: none;">返回快速登录</a><a class="quc-link quc-link-grey quc-link-sign-up" href="#">注册新帐号</a><a class="quc-link quc-link-about quc-link-about-normal" href="http://i.360.cn/findpwd/" target="_blank">忘记密码？</a><a class="quc-link quc-link-about quc-link-about-mobile" href="http://i.360.cn/help/smscode" target="_blank">校验码常见问题</a><a class="quc-link quc-link-about quc-link-about-qrcode" href="#">什么是二维码登录？</a><a class="quc-link quc-link-about quc-link-about-onekey" href="#">什么是一键登录？</a></div></div></div>
                    </div>
                    <div class="otherMessage clearfix" style="display: none;">
                        <a hidefocus="true" href="#" class="gray">使用其他帐号登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!---->
    <div class="other-question">
        <ul class="quc-clearfix">
            <li class="other-question-item">
                <a href="http://i.360.cn/complaint?sb_param=be60c4eade2d5f60c48578f7bd3c65c0" title="" target="_blank">
                    <div class="info-wrap clearfix">
<span class="info-icon">
<span class="account_complaint">
</span>
</span>
<span class="info-text">
<p class="title">帐号申诉</p>
<p class="text">人工客服解决问题</p>
</span>
                    </div>
                </a>
            </li>
            <li class="other-question-item">
                <a href="http://i.360.cn/findpwd/customerhelper?sb_param=c654cdb248315a9d0c1188d85fce5f3d" title="" target="_blank">
                    <div class="info-wrap clearfix">
<span class="info-icon">
<span class="frequent_question">
</span>
</span>
<span class="info-text">
<p class="title">帮助中心</p>
<p class="text">查看常见用户问题</p>
</span>
                    </div>
                </a>
            </li>
            <li class="other-question-item">
                <a href="http://i.360.cn/findpwd?sb_param=9affb6f3d865aa5e8bbb6574561aaa0f" title="" target="_blank">
                    <div class="info-wrap clearfix">
<span class="info-icon">
<span class="find_password">
</span>
</span>
<span class="info-text">
<p class="title">找回密码</p>
<p class="text">自助找回帐号密码</p>
</span>
                    </div>
                </a>
            </li>
            <li class="other-question-item">
                <a href="http://i.360.cn/security/accountguard?sb_param=7b6632091da8b9242e473268b5ff5310" title="" target="_blank">
                    <div class="info-wrap clearfix">
<span class="info-icon">
<span class="account_security">
</span>
</span>
<span class="info-text">
<p class="title">帐号安全</p>
<p class="text">下载神器告别盗号</p>
</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>


</div>
    <!---->
    <div id="ft">Copyright©2005-<span id="currentYear">2016</span> 360.CN All Rights Reserved 360安全中心
        <p><a target="_blank" href="http://www.miibeian.gov.cn?sb_param=1db656ed039ee5c7e0358ccb01ece4a2">京ICP证080047号[京ICP备08010314号-6] </a></p>
        <p>
            <a style="color:#999;" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000006&amp;sb_param=4ba5ecfe594302a945ed81fcb253368e" target="_blank">
                <img class="wangan" src="http://p4.qhimg.com/t01d8eda6e551cf2615.png">京公网安备 11000002000006号</a>
        </p>
    </div>
</div>
<!--tip start-->
<div class="mod-dialog">
    <div class="dialog-nav">
        <span class="dialog-title">提示</span>
        <a href="#" onclick="return false" class="dialog-close"></a>
    </div>
    <div class="dialog-main"><div class="dialog-content"><p id="tip-content">登录成功！请点击“确定”按钮跳转至首页</p></div><div class="dialog-console clearfix_new"><a class="console-btn-confirm" href="index.html" target="_blank">去首页</a></div></div></div>

<div class="mod-dialog-bg" style=""></div>
<script>
    function tip(content){
        $('#tip-content').text(content);
        $('.mod-dialog-bg').css("display","block");
        $('.mod-dialog').css("display","block");

        $('.dialog-close').click(function(e){
            //清空信息
          /*  $('#reg-mobile').val('');
            $('#reg-pwd').val('');
            $('#reg-yzm').val('');*/
            //隐藏
            $(this).parent().parent().parent().find('.mod-dialog-bg').hide();
            $(this).parent().parent('.mod-dialog').css("display","none");

        })
        $('.console-btn-confirm').click(function(e){
            $(this).parent().parent().parent().parent().find('.mod-dialog-bg').css("display","none");
            $(this).parent().parent().parent('.mod-dialog').css("display","none");
        })
    }
</script>
<!--tip over-->

<script>
    /**/
    var regPhoneNum= /^1[3|4|5|7|8]\d{9}$/;

    $('#log-usn').keyup(function(){
        this.value=this.value.replace(/[^0-9-]+/, '');//只能输入数字
    })

    function exist(){
        var usn = document.getElementById('log-usn').value;
        // 先取cookie里数据 registerUsers 存储格式username,pwd:username2,pwd2:username3,pwd3
        var users = getCookie("registerUsers");
        // 按照储存时的格式解析
        users = users.split(":");
        //判断是否已经注册过
        for(var i = 0; i < users.length; i++){
            var user = users[i].split(",")
            // 逐条匹配， 有用户名和密码都匹配上的话，登录成功，跳转到首页
            if(usn === user[0]){
                isExisted = true;
            }
        }
    }
    /*
     * 用户名逻辑
     * */

    function checkPhoneNum() {
        var usn = document.getElementById('log-usn').value;
        isExisted = false;//每次blur都初始为假
        exist()
        /*
         下面进行各种逻辑判断
         * */

        if(usn == ''){   //判断输入是否为空
            $('#error-tip').html('手机号输入为空');
            return false;
        }

        if(regPhoneNum.test(usn) == false){ //判断输入格式是否正确
            $('#error-tip').html('手机号码格式不正确');
            return false;
        }

        if (!isExisted){  //判断是否已经存在
            $('#error-tip').html('用户名不存在，请先注册');
            return false;
        }
        //正确时的判断
        $('#error-tip').html('');
        return true;
    }

    /*
     * 密码逻辑
     * */
    function checkPwd(){
        var pwd=document.getElementById("log-pwd").value;
        /*
         * 各种判断 注意顺序
         * */
        //exist();
        if(!checkPhoneNum()){
            //$('#error-tip').html('');
            return false;
        }
        //
        if (pwd == '') {
            $('#error-tip').html('密码不能为空');
            return false;
        }
        if (pwd.length < 8 || pwd.length > 16) {
            $('#error-tip').html('长度要在8~16之间');
            return false;
        }
        if (/[^\x00-\x7f]/.test(pwd)) {
            $('#error-tip').html('密码编码格式不合规范');
            return false;
        }
        if (/^\d{8,16}$/.test(pwd)) {
            $('#error-tip').html('不能全部为数字');
            return false;
        }
        if (/^[^A-Za-z0-9]+$/.test(pwd)) {
            $('#error-tip').html('不能以非法字符开头');
            return false;
        }
        if (/^[A-Za-z]{8,16}$/.test(pwd)) {
            $('#error-tip').html('不能全部为字母');
            return false;
        }
        $('#error-tip').html('');
        return true;
    }

    var loginBtn = document.getElementById('log-login');
    loginBtn.onclick = function (){
        var usn = document.getElementById('log-usn').value;
        var pwd = document.getElementById('log-pwd').value;
        if(!checkPhoneNum()){
            // $('#error-tip').html('');
            return false;
        }
        if(!checkPwd()){
            // $('#error-tip').html('');
            return false;
        }

        if(usn === ""){
            $('#error-tip').html("用户名不能为空")
            //alert("用户名不能为空！");
            return false;
        }
        if (pwd === ""){
            $('#error-tip').html("密码不能为空")
            //alert("密码不能为空");
            return false;
        }
        setCookie("loginedUser", usn, 7);
        // 跳转
        tip('登录成功!点击"确定"进入首页')
        $('#error-tip').html("")

        // registerUsers
        // username,pwd:username2,pwd2:username3,pwd3
        // 拿到cookie里面储存的所有用户名和密码数据
    }
</script>
</body>
</html>